<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <div>
          <span style="color: #666">订单标题:</span>
          <el-input
            v-model="input1"
            style="width: 240px; margin: 0 12px"
            placeholder="请输入订单标题"
          />
          <el-button type="primary" style="margin: 0 12px" @click="search"
            >搜索</el-button
          >
        </div>


      </el-header>
      <el-main class="main">

        <el-divider />
         <el-table :data="orderList" stripe style="width: 100%">
      <el-table-column prop="productOrderCode" label="订单编号" />
      <el-table-column prop="productTitle" label="商品名称" />
      <el-table-column prop="productOrderReceiver" label="收货人" />
      <el-table-column prop="productOrderMobile" label="联系电话" />
      <el-table-column label="收货地址">
        <template #default="scope">
          {{ scope.row.productOrderDetailAddress }}
        </template>
      </el-table-column>
      <el-table-column prop="productOrderTotalPrice" label="订单金额" />
      <el-table-column prop="productOrderPayDate" label="下单时间" />
      <el-table-column  label="订单状态" >
      <template #default="scope">
        <el-tag v-if="scope.row.productOrderStatus === '待付款'" type="info">待付款</el-tag>
        <el-tag v-else-if="scope.row.productOrderStatus === '待发货'" type="success">待发货</el-tag>
        <el-tag v-else-if="scope.row.productOrderStatus === '待确认'" type="warning">待确认</el-tag>
        <el-tag v-else-if="scope.row.productOrderStatus === '交易成功'" type="success">交易成功</el-tag>
        <el-tag v-else-if="scope.row.productOrderStatus === '交易关闭'" type="info">交易关闭</el-tag>
        <el-tag v-else-if="scope.row.productOrderStatus === '已发货'" type="primary">已发货</el-tag>
        <el-tag v-else-if="scope.row.productOrderStatus === '已确认'" type="success">已确认</el-tag>
        <el-tag v-else-if="scope.row.productOrderStatus === '退货中'" type="warning">退货中</el-tag>
        <el-tag v-else-if="scope.row.productOrderStatus === '退货成功'" type="info">退货成功</el-tag>
        <el-tag v-else-if="scope.row.productOrderStatus === '退货失败'" type="danger">退货失败</el-tag>
      </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template #default="scope">
          <el-button
            size="small"
            @click="viewOrderDetail(scope.row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      v-model="dialogVisible"
      width="600px"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="订单编号">{{ currentOrder.productOrderCode }}</el-descriptions-item>
        <el-descriptions-item label="收货人">{{ currentOrder.productOrderReceiver }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentOrder.productOrderMobile }}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{ currentOrder.productOrderDetailAddress }}</el-descriptions-item>
        <el-descriptions-item label="邮政编码">{{ currentOrder.productOrderPost }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">￥{{ currentOrder.productOrderTotalPrice }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ formatDate(currentOrder.productOrderPayDate) }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{ currentOrder.productOrderStatus }}</el-descriptions-item>
        <el-descriptions-item label="买家留言">{{ currentOrder.productOrderItems[0]?.productOrderItemUserMessage || '无' }}</el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
      </el-main>
      <el-footer class="footer"
        ><div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :size="size"
            layout="total, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /></div
      ></el-footer>
    </el-container>
  </div>
</template>

<script lang="js" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import instance from "@/utils/request";
import { onMounted } from "vue";
const input1 = ref("");
const currentPage = ref(1);
const pageSize = ref(10);
const size = ref("large");
const total = ref(0);
const orderList = ref([]);
const dialogVisible = ref(false);
const currentOrder = ref({});
const search = () => {
  getOrderList();
  ElMessage.success("搜索成功！");
};
const tableData = ref([]);
// 查看订单详情
const viewOrderDetail = (order) => {
  currentOrder.value = order;
  dialogVisible.value = true;
};
// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN');
};
// 获取订单列表
const getOrderList = async () => {
  try {
    const response = await instance.get("/order/getAllOrder",{
      params: {
        page: currentPage.value,
        pageSize: pageSize.value,
        productTitle: input1.value,
      },
    });

    if (response.data.code === 200) {
      orderList.value = response.data.data;
    } else {
      ElMessage.error(response.data.message || "获取订单列表失败");
    }
  } catch (error) {
    console.error("获取订单列表出错:", error);
    ElMessage.error("获取订单列表失败");
  }
};

onMounted(() => {
  getOrderList();
});
const getProductList = async () => {
  // 在这里添加获取商品列表的逻辑
  const res = await instance.get("/product/list", {
    params: {
      page: currentPage.value,
      pageSize: pageSize.value,
    },
  });
  if (res.data.code === 200) {
    tableData.value = res.data.data.records;
    total.value = res.data.data.total;
  } else {
    ElMessage.error("获取用户列表失败");
  }
};
const handleSizeChange = (val) => {
  pageSize.value = val;
  getProductList();
}
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getProductList();
}
</script>
<style scoped>
.header {
  background-color: rgb(255, 255, 255);
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}
.main {
  background-color: rgb(255, 255, 255);
  padding: 20px 20px;
  height: calc(84vh - 100px);
  margin-top: 10px;
}
.footer {
  background-color: rgb(255, 255, 255);
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
  margin-top: 15px;
}
.demo-pagination-block {
  display: flex;
  justify-content: flex-end;
}
</style>
